<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 10px">
      <el-tab-pane label="视频" name="first">
        <component is="searchVideo"></component>
      </el-tab-pane>
      <el-tab-pane label="文章" name="second">
        <component is="searchArticles"></component>
      </el-tab-pane>
      <el-tab-pane label="文件" name="third">
        <component is="searchFile"></component>
      </el-tab-pane>
      <el-tab-pane label="用户" name="fourth">
        <component is="searchUser"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import searchVideo from "@/components/SearchVideo.vue";
import searchFile from "@/components/SearchFile.vue";
import searchArticles from "@/components/SearchArticles.vue";
import searchUser from "@/components/SearchUser.vue";

export default {
  name: "Search",
  components: {
    searchVideo,
    searchFile,
    searchArticles,
    searchUser
  },
  data(){
    return{
      inputValue: '',
      activeName:'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    querySearchAsync(queryString, callback) {
      const results = this.hotSearches.filter(item => {
        return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
      });
      callback(results);
    },
    handleSelect(item) {
      this.inputValue = item.value;
    },
  }
}
</script>

<style scoped>

</style>